<template>
	<div id="dashboard-top-data">
		<div class="state">
			<div class="sys">
				<div class="content">
					<div>
						<div class="title">内存使用率</div>
						<div ref="system" class="c"></div>
					</div>
					<div>
						<div class="title">CPU使用率</div>
						<div ref="cpu" class="c"></div>
					</div>
					<div>
						<div class="title">磁盘使用率</div>
						<div ref="disk" class="c"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="info">
			<div class="client">
				<div class="title">客户端</div>
				<div class="content">
					<el-form ref="form" label-width="80px">
						<el-form-item label="IP">
							<el-button type="text" @click="copy(topData.clientIp)">{{ topData.clientIp }}</el-button>
						</el-form-item>
						<el-form-item label="IP归属">
							<el-button type="text">{{ topData.ipInfo }}</el-button>
						</el-form-item>
						<el-form-item label="浏览器">
							<el-button type="text">{{ topData.clientBrowser }}</el-button>
						</el-form-item>
						<el-form-item label="系统">
							<el-button type="text">{{ topData.clientOs }}</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="process">
				<div class="title">程序</div>
				<div class="content">
					<el-form ref="form" label-width="80px">
						<el-form-item label="启动时间">
							<el-button type="text">{{ topData.serverStartDate | DF }}</el-button>
						</el-form-item>
						<el-form-item label="已运行">
							<el-button type="text">{{ runnedTime }}</el-button>
						</el-form-item>
						<el-form-item label="程序名">
							<el-button type="text">{{ topData.jarName }}</el-button>
						</el-form-item>
						<el-form-item label="JRE版本">
							<el-button type="text">{{ topData.jdkVersion }}</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="server">
				<div class="title">系统</div>
				<div class="content">
					<el-form ref="form" label-width="80px">
						<el-form-item label="已运行">
							<el-button type="text">{{ systemTotal.time || '获取中' }}</el-button>
						</el-form-item>
						<el-form-item label="操作系统">
							<el-button type="text">{{ systemTotal.system || '获取中' }}</el-button>
						</el-form-item>
						<el-form-item label="总上行">
							<el-button type="text">{{ systemTotal.upTotal | formatSize }}</el-button>
						</el-form-item>
						<el-form-item label="总下行">
							<el-button type="text">{{ systemTotal.downTotal | formatSize }}</el-button>
						</el-form-item>
						<el-form-item label="实时上行">
							<el-button type="text">{{ (systemTotal.up * 1024) | formatSize }}</el-button>
						</el-form-item>
						<el-form-item label="实时下行">
							<el-button type="text">{{ (systemTotal.down * 1024) | formatSize }}</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { parseTime, formatSeconds } from '@/utils/index.js';
import echarts from 'echarts';
import { $get } from '@/puigins/request.js';
import copy from '@/utils/copy.js'

export default {
	data() {
		return {
			topData: {},
			systemTotal: {},
			now: 0,
			systemChart: null,
			systemChartOption: {
				title: {
					text: '',
					left: 'center',
					top: 'center',
					subtext: ''
				},
				tooltip: {
					trigger: 'item'
				},
				series: [
					{
						type: 'pie',
						radius: ['65%', '80%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: false,
								fontSize: '20',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: []
					}
				],
				color: ['#4f8', '#ccc']
			},
			cpuChartOption: {
				title: {
					text: '',
					left: 'center',
					subtext: '',
					top: 'center'
				},
				series: [
					{
						type: 'pie',
						radius: ['65%', '80%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: false,
								fontSize: '20',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: []
					}
				],
				color: ['#4f8', '#ccc']
			},
			diskChartOption: {
				title: {
					text: '',
					left: 'center',
					top: 'center',
					subtext: ''
				},
				tooltip: {
					trigger: 'item'
				},
				series: [
					{
						type: 'pie',
						radius: ['65%', '80%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: false,
								fontSize: '20',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: []
					}
				],
				color: ['#4f8', '#ccc']
			}
		};
	},
	created() {
		$get("/admin/manage/system/getTopData").then(res => {
			if (res.code == 200) {
				console.log(res);
				this.topData = res.data;
			} else {
				this.$msgError(res);
			}
		});
		this.now = new Date().getTime();
		setInterval(() => {
			this.now = new Date().getTime();
		}, 1000);
		this.getSystemTotal();
	},
	methods: {
		copy(s){
			copy(s)
			this.$message.success("复制成功")
		},
		getSystemTotal() {
			$get('/admin/manage/system/getSystemTotal').then(res => {
				if (res.code == 200) {
					if (res.data) {
						this.systemTotal = res.data;
						this.initCharts();
					}
				} else {
					this.$msgError(res);
				}
				// clearTimeout(window.asjdklsajdahdffdsklfsdjk);
				// window.asjdklsajdahdffdsklfsdjk = setTimeout(() => {
				// 	this.getSystemTotal();
				// }, 5000);
			});
		},
		initCharts() {
			if (!isNaN(this.systemTotal.memRealUsed) && !isNaN(this.systemTotal.memTotal)) {
				//system
				this.systemChart = echarts.init(this.$refs.system);
				let v = this.systemTotal.memTotal - this.systemTotal.memRealUsed;
				this.systemChartOption.series[0].data = [];
				this.systemChartOption.series[0].data.push({
					name: '已使用(MB)',
					value: this.systemTotal.memRealUsed
				});
				this.systemChartOption.series[0].data.push({
					name: '剩余(MB)',
					value: v
				});

				this.systemChartOption.title.text = this.systemTotal.memRealUsed + '/' + this.systemTotal.memTotal + '(M)';
				this.systemChartOption.title.subtext = ((this.systemTotal.memRealUsed * 100) / this.systemTotal.memTotal).toFixed(0) + '%';
				this.systemChart.setOption(this.systemChartOption);
			}

			if (!isNaN(this.systemTotal.cpuRealUsed)&&!isNaN(this.systemTotal.cpuNum)) {
				//cpu
				this.cpuChart = echarts.init(this.$refs.cpu);
				let v1 = 100 - this.systemTotal.cpuRealUsed;
				this.cpuChartOption.series[0].data = [];
				this.cpuChartOption.series[0].data.push({
					name: '已使用',
					value: this.systemTotal.cpuRealUsed
				});
				this.cpuChartOption.series[0].data.push({
					name: '剩余',
					value: v1
				});

				this.cpuChartOption.title.text = this.systemTotal.cpuRealUsed + '%';
				this.cpuChartOption.title.subtext = this.systemTotal.cpuNum + '核';
				this.cpuChart.setOption(this.cpuChartOption);
			}

			//disk
			this.diskChart = echarts.init(this.$refs.disk);
			this.diskChartOption.series[0].data = [];
			this.diskChartOption.series[0].data.push({
				name: '已使用(GB)',
				value: parseFloat(this.systemTotal.diskUsed)
			});

			this.diskChartOption.series[0].data.push({
				name: '剩余(GB)',
				value: parseFloat(this.systemTotal.diskFree)
			});

			this.diskChartOption.title.text = this.systemTotal.diskUsed + '/' + this.systemTotal.diskTotal;
			this.diskChartOption.title.subtext = this.systemTotal.diskRatio;
			this.diskChart.setOption(this.diskChartOption);
		}
	},
	filters: {
		DF(t) {
			if (t) {
				return parseTime(t);
			} else {
				return '未知';
			}
		},
		formatSize(size) {
			if (isNaN(size)) {
				return '获取中';
			}
			if (size < 1024) return size + 'B';
			if (size / 1024 < 1024) return (size / 1024).toFixed(2) + 'KB';
			if (size / 1024 / 1024 < 1024) return (size / 1024 / 1024).toFixed(2) + 'MB';
			return (size / 1024 / 1024 / 1024).toFixed(2) + 'GB';
		}
	},
	computed: {
		runnedTime() {
			if (this.topData.serverStartDate) {
				return formatSeconds((this.now - this.topData.serverStartDate) / 1000);
			} else {
				return '未知';
			}
		}
	}
};
</script>

<style lang="scss">
#dashboard-top-data {
	display: flex;
	gap: 30px;
	padding: 0 30px;
	flex-wrap: wrap;
	justify-content: center;
	.state {
		flex: 1;
		.sys {
			.content {
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				width: 200px;
				> div {
					text-align: center;

					.c {
						width: 200px;
						height: 200px;
					}
				}
			}
		}
	}
	.info {
		flex: 3;
		display: flex;
		> div {
			width: 33.33333%;
			.title {
				font-size: 18px;
				font-weight: 600;
				padding-left: 20px;
			}
		}
	}
}
</style>
